You need the tools. Quite simply, you've got to have Adobe Photoshop‚Ñ¢ 3.0 or later, IconBuilder 2.0, and a PowerPC Mac running Mac OS 8.5 or later.
Note: This article was kindly written by Dave Brasgalla with the help of the many fine folks at the Iconfactory. Get thee to http://www.iconfactory.com/ now to pay homage to the Pixel Gods. Oh, and pick up a copy of IconBuilder while you're there!
 
Introduction
 
IconBuilder is the first true
32-bit icon resource editor
available for the Macintosh.
By combining custom icon
data (that you create or
import) as well as 1-bit or 8-bit
transparency masks from
Adobe Photoshop layers,
IconBuilder can create icons
on your desktop in a matter
of seconds. However, it
should be stressed at the
outset that IconBuilder is less of an icon "editor" in the traditional sense of ResEdit, NeoIcon, or Icon Machine, than it is an icon assembly tool. It's a filter, and leverages on the superior toolset of Photoshop to construct the new icns system resources along with the older, familiar ones. With that important distinction in mind, I'd like to share some of the insights I've gathered from making 32-bit icons for the Iconfactory in hopes of providing a basic guide to IconBuilder's usage.
 
Quality At The Core: An Opinion
Mac OS 8.5 introduced us to new territories, opening up iconic vistas that are painted in colors by the millions... with the added dimension of transparency! While it is easy to get carried away with the possibilities, it is my personal opinion that great icons should be great at all levels, and look as good as they can at every bit-depth. One should take as much care with the black-and-white resources of icons as with the 32-bit resources, and with everything in between. In this respect, I strongly recommend that you build your icons up to the 256 versions in your favorite icon editor first. When you have all these parts in place, it is significantly easier to add the 32-bit resources to your existing work than it is to work backwards from them. Trust me on this.
True, you can use the "QuickBuild" feature in IconBuilder (see below) to rapidly generate the lower bit-depths, but you'll generally get mixed results with this method, especially coming back downwards from a complex image. Your 256-level shadows and gradients will probably look… unusual.
Remember: Most Macintosh users still use OS 8.1 or lower, so truly well-crafted icons will address those user's icon needs as well. It's your choice, but quality always shines through!
 
"QuickBuilding"
IconBuilder 2.0 has a built-in QuickBuild‚Ñ¢ feature. At its most basic level, IconBuilder can employ this feature to quickly and easily generate the lower-bit depth resources from a 32-bit image that sits on a layer in Photoshop. Here's how to do it:
1. In a 32 x 32 pixel Photoshop document, create a new layer in RGB mode (it doesn't matter what you name it or if you name it at all — use whichever method you like).
2. Import or create your 32-bit image onto that layer using Photoshop.
3. With that layer as your active layer, Select All and launch IconBuilder from the Filters menu — it will be under the heading "Iconfactory" near the bottom of the list. When the interface opens, you'll see your current selection in the Filter's large left-side window labeled "Photoshop Layer".
4. Click the Add Both button next to the window. You'll see your selection appear in the 32 bit/Large window of the resource grid.
5. Press the QuickBuild button below 
your Photoshop Layer window.
Presto! All bit-depths appear in the
grid, at both 32 x 32 and 16 x 16 List
View sizes.
6. Press the Save button in the lower
right, then name and file your new
32-bit icon.
You have now made your first Mac
OS 8.5-ready icon!
Very simple, right? What about
what lays beyond this simple
operation? What if you want to do
more, to create an icon that truly takes advantage of the new capabilities? IconBuilder is ready to make that task just as easy, although it will take a bit longer…
 
Workflow Techniques
When you extend yourself beyond the QuickBuild scenario, you will have to be prepared to organize your workflow in a logical manner. Everyone has their own method of working in Photoshop, and a few easy techniques go a long way towards keeping everything moving along smoothly.
IconBuilder has some smart features when it comes to Importing, Opening, and Saving icon resources. For instance, the filter will "remember" the last location — even the last file! — that you went to, for each of those different options. If you Import an icon from your desktop, then work on it and save it to a different folder, when you hit the Import button again, IconBuilder will still be looking at the original file you imported. Conversely, if you then re-open the Save dialog, the filter will be looking at the last saved version you made — and will ask you if you want to overwrite the file. This can be very handy for organizing your work in progress. You can put all the files you want to Import or Open in one folder and all the final saved versions in another, without having to re-navigate through the Open/Save dialog each time — a big time-saver!
IconBuilder saves files as ResEdit documents, but ResEdit cannot edit the new icns resource in its icon editor window, so it is recommended that you do not open these files with ResEdit once you have saved them with IconBuilder! You'll be better off making any tweaks in IconBuilder after that. IconBuilder "sees" files it has saved as "Openable" documents, but for everything else, you'll need to use the Import button in the lower right to bring in the data and mask info. You can use this feature with any icon data, even icons that are not "custom," meaning icons being generated on-the-fly by the system (generic folders, etc.).
To edit 8.5 icons, you will Import or Open an icon, select the resource bit depth and size you wish to edit in the Resource Grid window, and then apply the Data, Mask, or Both to the current Photoshop layer. This is done in the large Target Icon File window on the right by selecting one of those three options and pressing "Apply View to Photoshop Layer". Do whatever you wish to do graphically to your layer in Photoshop, then make sure you have done a Select All and re-launch the filter (because it is a filter, IconBuilder cannot stay open while you work on your Photoshop layer). Back in the filter interface, use the Add Data, Add Mask or Add Both buttons to add the edited information back into the desired icon resource.
Remember: If you accidentally add information to the wrong window of the grid, you can use the Undo button. Also, IconBuilder will give you the chance to save or discard your changes each time you flip back into Photoshop.
 
The Deep Mask
The new masking transparency feature of 8.5 icons is probably the trickiest aspect of working with them. OS 8.5 icons can recognize 256 greyscale levels of transparency (or opacity, as Photoshop is going to want to call it). I have found that the best way to edit these masks for opacity is to use a combination of the Pencil tool set to a one-pixel brush size and painting with black, and the Eraser tool, set to Airbrush and also at a one-pixel brush size. With these two tools, you can add or remove data from the mask in levels. Don't make the mistake of drawing in white with the pencil tool, because the alpha channel in Photoshop will still see that as solid black when you apply the mask to the icon! It's only looking at the alpha channel.
Often, I find it useful to Select All around the color Data on a layer, press the Up and Down arrow keys once each to get an exact selection around my art, and save that selection to a new alpha channel in Photoshop. Then, later on when I apply the 32-bit mask to the layer, I can load this selection and have an exact outline of my data, allowing me to use all sorts of fancy airbrush techniques without going outside the data area.
Remember: Add greyscale value with the Pencil, Brush, or Airbrush tools, but subtract it with the Eraser tool!
If you apply your greyscale transparency/opacity mask to any bit-depth less than 32, you will just get solid black. You can check how your Data and Mask are lining up by toggling the options in the Target Icon File window.
In general, try to take your time at this phase and think twice before pressing any buttons to add the Layer info to your icon. Are you adding it to the right bit-depth resource? Check your Grid window selection. Are you pressing Add Data or Add Mask? Don't be in too much of a rush, and you'll save a lot of repeated steps. Don't worry — as you get the hang of the logistics, this will start to cook right along. You just need to evolve your own habits for using the filter's options.
 
Another helpful technique
at this point might be to save
out different aspects of the
icon on their own Photoshop
layers and save that PSD file
for future reference, or in
case you really make a mess
of the icon and wish to go
back to an earlier stage. Also,
don't be afraid to save
multiple copies of the icon
through IconBuilder, but if
you do this, try to give them
informative names to avoid
confusing yourself!
Remember: Every time you
Apply To Photoshop Layer
you overwrite the data that
was there. Make sure your
color data is saved somewhere, either through IconBuilder or on another PS layer, before you do any Apply steps. Think it through…
 
More About The Deep Mask
Here is one of the most common pitfalls when working with deep masks — one which I have fallen into myself. If your 8-bit mask (the one for 256 colors) is not of exactly the same layout as your 32-bit mask, you will get what's been called the "Ever-Darkening Shadow" effect. Each time a user selects the icon, the shadow will get progressively darker and darker, finally turning black. You can avoid this by making sure that the two resource masks match up. Simply Apply the final 32-bit mask to the Photoshop layer, then re-launch the filter and Add the mask to the 8-bit resource. The greyscale mask should turn solid black and this should solve the problem.
This brings us to another point — in 256 colors, it is common to simulate a shadow by working with the greys in the image data, making a nice little gradient shadow. The problem with that is the lighter greys towards the outer edge of the gradient tend to show up on darker desktops in an undesirable way. Mac OS 8.5 solves this by letting you make a true gradient with opacity, so that as the shadow "peters out" towards the edge, more and more of the desktop colors show through and mingle with your shadow color, creating some beautiful and impressive effects.
Here's the key to good transparent shadow results. Take the shadow area of the 32-bit icon that is graduated opacity-wise in the Mask and make it solid black in the Data, then Add the Data back in to the 32-bit resource. The Data for the 32-bit icon won't look right by itself, but when you combine it with the Deep Mask, it will look perfect! You can toggle this effect in the Target Icon Layer to understand this better. It sounds confusing, but when you see it visually, it makes sense, so give it a try!
Remember: If the opacity greyscale of the Deep Mask is combined with an existing gradient in the data, you will most likely have too little of the shadow effect than you wanted. And always make the 1-bit Mask area match the Deep Mask - unless you really want the "Ever-Darkening Shadow"!
Here's another good trick. Suppose you are making an icon of a porthole or window, and you want the glass to have a uniform opacity — let's say 40%. Just use the Selection tools to select the exact area of the glass on the Mask (you may want to use the Save Selection technique on the data layer first so you can Load Selection once you Apply the Mask to your layer), then, without de-selecting, choose black as your color, hit Delete, and then use the Fill command and set the opacity to 40%. This is a quick way to get uniform areas of transparency. Don't be afraid to experiment with this method! You could get fancy and use the Airbrush tool on the Mask selection to darken just the edges of the porthole glass, for a "fogging" effect around the edges. Be creative!
 
Some Things To Remember…
Window-dragging in ResEdit and Scaling in Photoshop both produce less-than-desirable results when generating "List View" 16 x 16 icon resources, so good quality 16 x 16s usually must be tweaked by hand. Another solution to this is cropping the 32 x 32 icon's data. IconBuilder makes this quite easy, as you can easily drag the Photoshop Layer icon information around in it's window. Just move your cursor over the Photoshop Layer window and it will change to a "grabbing hand". The only limitation is that you have to stay within the 32 x 32 bounding box and cannot "slide" the icon off the total 32 x 32 field.
Remember: If you chose to "crop," try to judge and use the most recognizable part of the icon, as people will be depending on the List View size to tell them just as much as the 32 x 32 size! Play around with it until you are satisfied.
There is one big caveat to Mac OS 8.5 icon resources. The old Finder method of copying and pasting the icon from the Get Info window still works, but it will only paste the 8.5 icns resources. In other words, all the black-and-white, 16-color, and 256-color resources will be lost! Currently, the only way I know to avoid this problem is to use a utility like IconDropper‚Ñ¢ (another Iconfactory application) to save the icon into a Pack or archive and use that utility to apply the icon to new files and folders.
 
Bon Voyage!
For the icon artist hobbyist, this may be as far as you need to go. But what about a professional client or developer who needs the icons in some other format? Photoshop itself saves in a wide variety of formats, and IconBuilder can make the process even easier.
I recently did a job for Apple where they had requested both 8.5 icons and TIFF files with the alpha channels included. Once my icons were done and saved in IconBuilder/ResEdit format, it was simple to:
1. Open the icon in IconBuilder and Apply the 32-bit icon to a blank 32 x 32 Photoshop layer.
2. Flip back into Photoshop, and choose Save A Copy As… from the File menu.
3. Select TIFF as your file creator type and make sure the "Exclude Alpha Channels" check box is not checked.
4. Make sure the "Exclude Non-Image Data" button is checked.
5. Name it and save it, preferably into a new folder labeled "TIFFs" or something similar.
This allowed me to make the required files in about 4 minutes!
 
In Conclusion…
I hope that this serves as a good, general starter's guide to using IconBuilder. It's a relatively new Photoshop plug-in which has more to offer than I've covered here. We at the Iconfactory invite you to experiment freely and push back the limits of icon-building — show the world what you can do! We will be listening to your feedback and constantly improving IconBuilder to make sure that you have the professional-level tools you need to make the best icons anyone has ever seen!
 
Grateful Acknowledgment
The biggest acknowledgement has to go to Craig Hockenberry, the man behind the plug-in. Without him, there would be no way for any of us to actively create these great new icon resources. He has provided the icon community with an incredible tool!
Also, Arno Gourdol at Apple was instrumental in providing Craig with the technical details of the new icns resources that he needed to make IconBuilder as powerful as it is. Thanks, Arno!
Finally, we must thank Gedeon Maheux, Corey Marion and Talos Tsui for the masterful interface design of the filter. It certainly has made my IconBuilding easier than ever…
Keep checking the Iconfactory at http://www.iconfactory.com/ for the latest updates of and enhancements to IconBuilder.
